<template>
  <nav class="navbar">
    <div class="nav-title">校园活动系统</div>
    <ul class="nav-menu">
      <li>
        <router-link to="/public-activities">公开活动</router-link>
      </li>
      <!-- 仅管理员可见活动管理菜单 -->
      <li v-if="isAdministrator">
        <router-link to="/activity-management">活动管理</router-link>
      </li>
      <li><a href="#" @click="logout">退出登录</a></li>
    </ul>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      // 从 localStorage 获取用户角色
      userRole: localStorage.getItem('userRole') || null
    };
  },
  computed: {
    // 判断当前用户是否为管理员
    isAdministrator() {
      return this.userRole === 'admin';
    }
  },
  methods: {
    logout() {
      localStorage.removeItem('userRole');
      this.$router.push('/login');
    }
  }
};
</script>

<style scoped>
.navbar {
  background-color: #2c3e50;
  color: white;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-title {
  font-size: 1.5rem;
}

.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1rem;
}

.nav-menu li {
  display: inline;
}

.nav-menu a {
  color: white;
  text-decoration: none;
  padding: 0.5rem;
  transition: background-color 0.3s;
}

.nav-menu a:hover {
  background-color: #34495e;
  border-radius: 4px;
}
</style>